<template>
  <div class="box_container">
    <div class="box_banner">
      <!-- <img class="box_banner_pc" src="@/assets/home-banner-pc.png" alt="" /> -->
      <t-swiper
        class="tdesign-demo-block--swiper"
        :current="current"
        :navigation="{ showSlideBtn: 'never' }"
      >
        <t-swiper-item
          v-for="(item, index) in bannerList"
          :key="index + 'banner'"
        >
          <div class="demo-item">
            <img
              v-if="useWidth.width.value > 750"
              :src="item.imageUrl"
              alt=""
            />
            <img v-else :src="item.imagePhone" alt="" />
          </div>
        </t-swiper-item>
      </t-swiper>
    </div>
    <div
      class="box_content"
      :style="{
        width: settingStore.publicWidth,
      }"
    >
      <!-- 新闻公告 -->
      <div class="box_content_news box_content_item">
        <div class="box_content_title">
          <h3>新闻公告</h3>
          <span></span>
          <h4>NEWS ANNOUNCEMENT</h4>
        </div>
        <div class="box_content_news_content">
          <div class="box_content_news_content_item">
            <t-swiper
              class="news-swiper"
              :autoplay="false"
              :current="newsCurrent"
              :navigation="{ showSlideBtn: 'never' }"
            >
              <t-swiper-item
                v-for="(item, index) in newsData"
                :key="index + 'newsData'"
              >
                <div
                  class="news-swiper-item"
                  @click="handNewsDetail(item.id, 0)"
                >
                  <img :src="item.image" alt="" />
                  <div class="news-swiper-item-bottom">
                    <span>{{ item.title }}</span>
                  </div>
                </div>
              </t-swiper-item>
            </t-swiper>
            <div class="news-swiper-page">
              <div
                :class="
                  newsCurrent === index
                    ? 'news-swiper-page-item-active news-swiper-page-item'
                    : 'news-swiper-page-item'
                "
                v-for="(item, index) in newsData"
                :key="index + 'newsDatapage'"
                @click="handleNewsChange(index)"
              >
                {{ index + 1 }}
              </div>
            </div>
          </div>
          <div class="box_content_news_content_item">
            <div class="box_content_news_content_item_header">
              <div class="box_content_news_content_item_header_title">
                <h3>通知公告</h3>
                <h4>Announcement and Notice</h4>
              </div>
              <div class="box_content_news_content_item_header_more">
                <a href="javascript:void(0);" @click="handNewsList(0)">更多></a>
              </div>
            </div>
            <div class="box_content_news_content_item_content">
              <div
                class="box_content_news_content_item_content_item"
                v-for="(item, index) in noticeData"
                :key="index + 'notice'"
              >
                <div
                  class="box_content_news_content_item_content_item_title"
                  @click="handNewsDetail(item.id, 1)"
                >
                  {{ item.title }}
                </div>
                <div
                  class="box_content_news_content_item_content_item_date"
                  @click="handNewsDetail(item.id, 1)"
                >
                  <TimeIcon style="color: #ad2121; font-size: 18px" />
                  <span>{{ item.publishTime }}</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      <div class="box_content_news_mobile box_content_item">
        <div class="box_content_title">
          <h3>新闻资讯</h3>
          <span></span>
          <h4>NEWS AND INFORMATION</h4>
        </div>
        <div class="box_content_news_mobile_content">
          <div class="box_content_news_mobile_content_item">
            <t-swiper
              class="news-swiper"
              :autoplay="false"
              :current="newsCurrent"
              :navigation="{ showSlideBtn: 'never' }"
            >
              <t-swiper-item
                v-for="(item, index) in newsData"
                :key="index + 'newsData'"
              >
                <div class="news-swiper-item">
                  <img :src="item.image" alt="" />
                  <div
                    class="news-swiper-item-bottom"
                    @click="handNewsDetail(item.id, 0)"
                  >
                    <span>{{ item.title }}</span>
                  </div>
                </div>
              </t-swiper-item>
            </t-swiper>
            <div class="news-swiper-page">
              <div
                :class="
                  newsCurrent === index
                    ? 'news-swiper-page-item-active news-swiper-page-item'
                    : 'news-swiper-page-item'
                "
                v-for="(item, index) in newsData"
                :key="index + 'newsDatapage'"
                @click="handleNewsChange(index)"
              >
                {{ index + 1 }}
              </div>
            </div>
          </div>
        </div>
        <div class="box_content_title">
          <h3>通知公告</h3>
          <span></span>
          <h4>Announcement and Notice</h4>
        </div>
        <div class="box_content_news_mobile_content mobile_notice">
          <div
            class="box_content_news_content_item_content_item"
            v-for="(item, index) in noticeData"
            :key="index + 'notice'"
          >
            <div class="box_content_news_content_item_content_item_title">
              {{ item.title }}
            </div>
            <div class="box_content_news_content_item_content_item_date">
              <div>
                <TimeIcon style="color: #ad2121; font-size: 18px" />
                <span>{{ item.summary }}</span>
              </div>
              <a href="" @click="handNewsDetail(item.id, 1)">查看详情></a>
            </div>
          </div>
        </div>
      </div>
      <!-- 关于我们  -->
      <div class="box_content_user box_content_item">
        <div class="box_content_title">
          <h3>关于我们</h3>
          <span></span>
          <h4>About Us</h4>
        </div>
        <div class="box_content_user_content_img">
          <img :src="bjys" alt="" />
        </div>
        <div class="box_content_user_content">
          <div class="box_content_user_content_text" v-html="about_us"></div>
        </div>
      </div>
      <!-- 合作伙伴 partner -->
      <div class="box_content_partner box_content_item">
        <div class="box_content_title">
          <h3>合作伙伴</h3>
          <span></span>
          <h4>cooperative partner</h4>
        </div>
        <div class="box_content_partner_content">
          <div class="box_content_partner_box">
            <div
              class="box_content_partner_item"
              v-for="(item, index) in partnerData"
              :key="index + 'partner'"
            >
              <div class="box_content_partner_item_img">
                <img :src="item.imageUrl" alt="" />
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 联系我们 partner -->
      <div class="box_content_us box_content_item">
        <div class="box_content_title">
          <h3>联系我们</h3>
          <span></span>
          <h4>Contact Us</h4>
        </div>
        <div class="box_content_us_content_img">
          <img :src="bjys" alt="" />
        </div>
        <div class="box_content_us_content">
          <div class="box_content_us_content_left">
            <!--            <h3>联系我们</h3>
            <p>邮箱：hr@bgi-graphene.com</p>
            <p>电话/传真：010-83432600</p>
            <p>邮编：100095</p>
            <p>地址：北京市海淀区苏家坨镇翠湖南环路13号院智谷中心2号楼</p>-->
            <div v-html="link_us"></div>
          </div>
          <div class="box_content_us_content_right">
            <div class="app">
              <BaiduMap
                :ak="yourAk"
                :center="{ lng: 116.184493, lat: 40.080566 }"
                :zoom="18"
              />
            </div>
          </div>
        </div>
      </div>
    </div>

    <t-dialog
      class="custom-dialog"
      v-model:visible="dialogTableVisible"
      header=""
      :close-on-overlay-click="false"
      :confirm-btn="null"
      :cancel-btn="null"
      size="large"
      :closeBtn="false"
    >
      <div class="formBox">
        <t-form
          ref="form"
          :rules="FORM_RULES"
          :data="formData"
          :colon="true"
          @submit="onSubmit"
        >
          <t-form-item label="密码" name="password">
            <t-input
              v-model="formData.password"
              type="password"
              placeholder="请输入内容"
            ></t-input>
            <template #prefix-icon>
              <lock-on-icon />
            </template>
          </t-form-item>
          <t-form-item label="确认密码" name="confirmPassword">
            <t-input
              v-model="formData.confirmPassword"
              type="password"
              placeholder="请输入内容"
            ></t-input>
            <template #prefix-icon>
              <lock-on-icon />
            </template>
          </t-form-item>
          <t-form-item>
            <t-button theme="primary" type="submit" block>重置密码</t-button>
          </t-form-item>
        </t-form>
      </div>
      <template #footer></template>
    </t-dialog>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref, reactive } from "vue";
import "@vueup/vue-quill/dist/vue-quill.snow.css";
import { MessagePlugin } from "tdesign-vue-next";
import {
  ChevronUpIcon,
  ChevronDownIcon,
  TimeIcon,
  LockOnIcon,
} from "tdesign-icons-vue-next";

import {
  getCarouse,
  getNews,
  configKey,
  partner,
  contentConfig,
  updateFirstPassword,
} from "@/api/index";
import BaiduMap from "@/pages/contactUs/components/BaiduMap.vue";
import { useWindowResize } from "@/utils/useWindowResize";
import { getCardList } from "@/api/list";
import { useRouter } from "vue-router";
import { title } from "process";
import { useSettingStore, useUserStore } from "@/store";
import { TOKEN_NAME } from "@/config/global";
const userStore = useUserStore();
const FORM_RULES = {
  password: [{ required: true, message: "密码必填" }],
  confirmPassword: [{ required: true, message: "确认密码必填" }],
};
const formData = reactive({
  password: "",
  confirmPassword: "",
});
const router = useRouter();
const useWidth = useWindowResize();
const yourAk = ref("xWJ1v0ApA7sPDhpJu11snN9GVhsGl0rZ"); // 替换为你的实际AK
const settingStore = useSettingStore();
const current = ref(0);
const dialogTableVisible = ref(false);
const bannerList = ref([
  {
    imageUrl: new URL("@/assets/banner-pc1.png", import.meta.url).href,
    imagePhone: new URL("@/assets/banner-mobile1.png", import.meta.url).href,
  },
]);
const bjys = ref(new URL("@/assets/bjys.png", import.meta.url).href);
getCarouse().then((e) => {
  bannerList.value = e;
});

const newsCurrent = ref(0);
const newsData = ref([]);
const noticeData = ref([]);
const partnerData = ref([
  {
    name: "大同大学",
    imageUrl: new URL("@/assets/datong.png", import.meta.url).href,
  },
]);
onMounted(() => {
  updateData();
});

function updateData() {
  // 有token的时候进行判断   后端需要加是否 修改过密码的判断
  var loginTime = localStorage.getItem("loginTime") as unknown;
  if (
    userStore.$state.token != null &&
    userStore.$state.token != "" &&
    loginTime != null &&
    loginTime == 0
  ) {
    dialogTableVisible.value = true;
  }
}
const onSubmit = ({ validateResult, firstError }) => {
  if (validateResult === true) {
    if (formData.password != formData.confirmPassword) {
      MessagePlugin.warning("密码不一致");
      return;
    }
    console.log(formData.password);
    updateFirstPassword({ password: formData.password })
      .then((e) => {
        localStorage.setItem("loginTime", 1);
        MessagePlugin.success("提交成功");
        dialogTableVisible.value = false;
      })
      .catch((e) => {
        if ((e.code = 401)) {
          localStorage.removeItem(TOKEN_NAME);
          localStorage.removeItem("loginTime");
          const router = useRouter();
          router.push({ path: "login" });
        }
      });
  } else {
    console.log("Validate Errors: ", firstError, validateResult);
    MessagePlugin.warning(firstError);
  }
};

partner().then((e) => {
  partnerData.value = e;
});
getNews({
  page: 1,
  limit: 10,
  type: 0,
}).then((e) => {
  newsData.value = e;
});
getNews({
  page: 1,
  limit: 10,
  type: 1,
}).then((e) => {
  noticeData.value = e;
});

const contact_email = ref("");
configKey("contact_email").then((e) => {
  contact_email.value = e.configValue;
});
const contact_phone = ref("");
configKey("contact_phone").then((e) => {
  contact_phone.value = e.configValue;
});

const company_address = ref("");
configKey("company_address").then((e) => {
  company_address.value = e.configValue;
});
const site_wechat = ref("");
configKey("site_wechat").then((e) => {
  site_wechat.value = e.image;
});

const about_us = ref("");
contentConfig("about_us").then((e) => {
  about_us.value = e.content;
});
const link_us = ref("");
contentConfig("link_us").then((e) => {
  link_us.value = e.content;
});

onMounted(() => {
  // console.log(width.value);
});
const handleNewsChange = (index) => {
  newsCurrent.value = index;
};
const handNewsDetail = (id: any, active: any) => {
  router.push({
    path: "/newsDetail",
    query: { active: active, id: id },
  });
};
const handNewsList = (active: any) => {
  router.push({
    path: "/news",
    query: { active: active },
  });
};
</script>

<style lang="less" scoped>
.formBox {
  width: 400px;
  margin: 0 auto;
}

.box_container {
  width: 100%;
  height: 100%;
  background: #fff;
  .box_banner {
    width: 100%;
    height: 440px;
    img {
      width: 100%;
      height: 440px;
    }
    .demo-item {
      width: 100%;
      height: 440px;
      overflow: hidden;
    }
    .box_banner_pc {
      display: block;
    }
    .box_banner_mobile {
      display: none;
    }
  }
  .box_content {
    margin: 72px auto;
    .box_content_title {
      text-align: center;
      margin: 48px 0;
      h3 {
        font-family: Microsoft YaHei;
        font-weight: bold;
        font-size: 20px;
        color: #ad2121;
      }
      span {
        display: inline-block;
        width: 20px;
        height: 2px;
        background: #666666;
        border-radius: 1px;
      }
      h4 {
        font-family: Microsoft YaHei;
        font-weight: 300;
        font-size: 14px;
        color: #666666;
        text-transform: uppercase;
      }
    }
    .box_content_item {
      width: 100%;
      display: flex;
      flex-direction: column;
      position: relative;
    }
    .box_content_news_mobile {
      display: none;
    }
    .box_content_news_content {
      height: 320px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .box_content_news_content_item {
        width: calc(50% - 10px);
        // width: 100%;
        height: 100%;
        overflow: hidden;
        background: #ffffff;
        box-shadow: 0px 0px 11px 0px rgba(50, 50, 50, 0.2);
        border-radius: 10px;
        position: relative;
        .box_content_news_content_item_header {
          width: 100%;
          height: 50px;
          display: flex;
          align-items: center;
          justify-content: space-between;
          padding: 0 20px;
          border-bottom: 1px solid #e3e3e3;
          .box_content_news_content_item_header_title {
            display: flex;
            align-items: flex-end;
            h3 {
              margin-right: 10px;
              font-family: Microsoft YaHei;
              font-weight: bold;
              font-size: 18px;
              line-height: 18px;
              color: #ad2121;
            }
            h4 {
              font-family: Microsoft YaHei;
              font-weight: 300;
              font-size: 14px;
              line-height: 10px;
              color: #666666;
              text-transform: uppercase;
            }
          }
          .box_content_news_content_item_header_more {
            a {
              font-family: Microsoft YaHei;
              font-weight: bold;
              font-size: 14px;
              color: #ad2121;
            }
          }
        }
        .box_content_news_content_item_content {
          width: 100%;
          height: calc(100% - 50px);
          overflow-y: auto;
          padding: 20px;
          .box_content_news_content_item_content_item {
            width: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            font-family: Microsoft YaHei;
            font-weight: 400;
            font-size: 14px;
            color: #666666;
            margin-bottom: 20px;
            border-bottom: 1px dashed #ccc;
            .box_content_news_content_item_content_item_title {
              width: calc(100% - 150px);
              white-space: nowrap; /* 强制文本不换行 */
              overflow: hidden; /* 隐藏溢出内容 */
              text-overflow: ellipsis; /* 显示省略号 */
              cursor: pointer;
            }
            .box_content_news_content_item_content_item_date {
              font-size: 12px;
              display: flex;
              align-items: center;
              span {
                margin-left: 10px;
              }
            }
          }
          .box_content_news_content_item_content_item:last-child {
            margin-bottom: 0;
          }
        }
        .news-swiper {
          height: 100%;
          :deep(.t-swiper__navigation) {
            display: none;
          }
          :deep(.t-swiper__content) {
            height: 100%;
          }
          .news-swiper-item {
            width: 100%;
            height: 100%;
            position: relative;
            img {
              width: 100%;
              height: 100%;
            }
            .news-swiper-item-bottom {
              width: 100%;
              height: 50px;
              background: #ffffff;
              // border-radius: 10px;
              opacity: 0.7;
              position: absolute;
              bottom: 0;
              left: 0;
              span {
                padding: 0 30px;
                display: block;
                width: 60%;
                font-family: Microsoft YaHei;
                font-weight: 400;
                font-size: 16px;
                color: #333333;
                line-height: 50px;
                white-space: nowrap; /* 强制文本不换行 */
                overflow: hidden; /* 隐藏溢出内容 */
                text-overflow: ellipsis; /* 显示省略号 */
                cursor: pointer;
              }
            }
          }
        }
        .news-swiper-page {
          width: 40%;
          height: 50px;
          position: absolute;
          right: 0;
          bottom: 0;
          z-index: 2;
          display: flex;
          align-items: center;
          justify-content: center;
          .news-swiper-page-item {
            width: 24px;
            height: 24px;
            line-height: 24px;
            background: #000000;
            opacity: 0.4;
            color: #fff;
            text-align: center;
            margin: 0 2px;
            cursor: pointer;
          }
          .news-swiper-page-item-active {
            background: #ad2121;
            opacity: 1;
          }
        }
      }
    }
    .box_content_partner_content {
      height: 124px;
      .box_content_partner_box {
        width: 100%;
        height: 100%;
        margin: 0 auto;
        box-sizing: border-box;
        display: flex;
        flex-wrap: wrap;
        grid: 10px;
        .box_content_partner_item {
          // width: calc(100% / 5);
          width: 224px;
          height: 124px;
          margin-right: 10px;
          margin-bottom: 10px;
          &:nth-of-type(5n) {
            margin-right: 0;
          }
          // opacity: 0.03;
          .box_content_partner_item_img {
            width: 100%;
            height: 100%;
            img {
              width: 100%;
              height: 100%;
              opacity: 0.93;
               -webkit-box-shadow: 2px 2px 10px #909090;
          box-shadow: 2px 2px 10px #909090;
          border-radius: 4px;
            }
          }
        }
      }
    }

    .box_content_user_content {
      width: 100%;
      height: 300px;
      border-radius: 10px;
      background: url("@/assets/home-user-pc.png") no-repeat center;
      background-size: 100% 100%;
      z-index: 2;
      .box_content_user_content_text {
        width: 771px;
        height: 100%;
        padding: 44px 0 44px 40px;
        ::v-deep p {
          font-family: Microsoft YaHei;
          font-weight: 400;
          font-size: 16px;
          color: #333333;
          line-height: 28px;
          text-indent: 2em;
        }
      }
    }
    .box_content_user_content_img {
      width: 602px;
      height: 602px;
      position: absolute;
      right: -301px;
      bottom: -150px;
      img {
        width: 100%;
        height: 100%;
      }
      z-index: 1;
    }
    .box_content_us_content {
      width: 100%;
      height: 360px;
      border-radius: 10px;
      background: #ffffff;
      padding: 45px;
      box-shadow: 0px 0px 11px 0px rgba(50, 50, 50, 0.2);
      display: flex;
      align-items: center;
      justify-content: space-between;
      z-index: 2;
      .box_content_us_content_left {
        width: 50%;
        line-height: 30px;
        padding-right: 20px;
        h3 {
          font-family: Microsoft YaHei;
          font-weight: bold;
          font-size: 18px;
          color: #ad2121;
          margin-bottom: 15px;
        }
        p {
          font-family: Microsoft YaHei;
          font-weight: bold;
          font-size: 16px;
          color: #333333;
          line-height: 28px;
        }
      }
      .box_content_us_content_right {
        width: 50%;
        height: 100%;
        .app {
          width: 100%;
          height: 100%;
          overflow: hidden;
        }
      }
    }
    .box_content_us_content_img {
      width: 602px;
      height: 602px;
      position: absolute;
      left: -301px;
      bottom: -150px;
      img {
        width: 100%;
        height: 100%;
      }
      z-index: 1;
    }
  }
}
@media screen and (min-width: 376px) and (max-width: 750px) {
  .formBox {
    width: 80%;
    margin: 0 auto;
  }
  .t-dialog__ctx .t-dialog {
    width: 80%;
  }
  .box_container {
    .box_banner {
      width: 100%;
      height: 385px;
      overflow: hidden;
      :deep(.t-swiper) {
        height: 100%;
        .t-swiper__content {
          height: 100%;
          .demo-item {
            height: 100%;
          }
        }
      }
      img {
        width: 100%;
        height: 100%;
      }
    }
    .box_content {
      width: 100% !important;
      .box_content_news {
        display: none;
      }
      .box_content_news_mobile {
        display: block;
      }
      .box_content_news_mobile_content {
        width: 100%;
        // height: 629px;
        background: #ffffff;
        box-shadow: 0px 0px 11px 0px rgba(50, 50, 50, 0.2);
        padding: 20px;
        .box_content_news_content_item_content_item {
          width: 100%;
          padding: 25px 0;
          border-bottom: 1px solid #e3e3e3;
          .box_content_news_content_item_content_item_title {
            font-family: Microsoft YaHei;
            font-weight: 400;
            font-size: 16px;
            line-height: 30px;
            color: #666666;
            width: calc(100% - 80px);
            white-space: nowrap; /* 强制文本不换行 */
            overflow: hidden; /* 隐藏溢出内容 */
            text-overflow: ellipsis; /* 显示省略号 */
            cursor: pointer;
          }
          .box_content_news_content_item_content_item_date {
            margin-top: 8px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            font-size: 14px;
            color: #666666;
            display: flex;
            align-items: center;
            justify-content: space-between;
            a {
              font-family: Microsoft YaHei;
              font-weight: bold;
              font-size: 14px;
              color: #ad2121;
            }
            > div {
              display: flex;
              align-items: center;
              white-space: nowrap; /* 强制文本不换行 */
              overflow: hidden; /* 隐藏溢出内容 */
              text-overflow: ellipsis; /* 显示省略号 */
              span {
                margin-left: 8px;
              }
            }
          }
        }
        .box_content_news_content_item_content_item:last-child {
          border-bottom: 0;
        }
        .box_content_news_mobile_content_item {
          width: 100%;
          height: 330px;
          position: relative;
          .news-swiper {
            height: 100%;
            :deep(.t-swiper__navigation) {
              display: none;
            }
            :deep(.t-swiper__content) {
              height: 100%;
            }
            .news-swiper-item {
              width: 100%;
              height: 100%;
              position: relative;
              img {
                width: 100%;
                height: 100%;
              }
              .news-swiper-item-bottom {
                width: 100%;
                height: 50px;
                background: #ffffff;
                // border-radius: 10px;
                opacity: 0.7;
                position: absolute;
                bottom: 0;
                left: 0;
                span {
                  padding: 0 30px;
                  display: block;
                  width: 60%;
                  font-family: Microsoft YaHei;
                  font-weight: 400;
                  font-size: 16px;
                  color: #333333;
                  line-height: 50px;
                  white-space: nowrap; /* 强制文本不换行 */
                  overflow: hidden; /* 隐藏溢出内容 */
                  text-overflow: ellipsis; /* 显示省略号 */
                }
              }
            }
          }
          .news-swiper-page {
            width: 40%;
            height: 50px;
            position: absolute;
            right: 0;
            bottom: 0;
            z-index: 2;
            display: flex;
            align-items: center;
            justify-content: center;
            .news-swiper-page-item {
              width: 24px;
              height: 24px;
              line-height: 24px;
              background: #000000;
              opacity: 0.4;
              color: #fff;
              text-align: center;
              margin: 0 2px;
              cursor: pointer;
            }
            .news-swiper-page-item-active {
              background: #ad2121;
              opacity: 1;
            }
          }
        }
      }
      .mobile_notice {
        .box_content_news_content_item_content_item {
          // height: 120px;
          display: flex;
          justify-content: space-between;
          flex-direction: column;
          .box_content_news_content_item_content_item_date {
            display: flex;
            justify-content: space-between;
            > div {
              width: calc(100% - 80px);
            }
          }
        }
      }
      .box_content_partner_content {
        height: 408px;
        .box_content_partner_box {
          width: 100%;
          height: 100%;
          margin: 0 auto;
          box-sizing: border-box;
          display: flex;
          flex-wrap: wrap;
          overflow-y: auto;
          .box_content_partner_item {
            width: calc(50% - 5px);
            height: 124px;
            margin-right: 10px;
            margin-bottom: 10px;
            &:nth-of-type(2n) {
              margin-right: 0;
            }
            // opacity: 0.03;
            .box_content_partner_item_img {
              width: 100%;
              height: 100%;
              img {
                width: 100%;
                // height: 100%;
                opacity: 0.93;
                 -webkit-box-shadow: 2px 2px 10px #909090;
                box-shadow: 2px 2px 10px #909090;
                border-radius: 4px;
              }
            }
          }
        }
      }

      .box_content_user_content {
        padding-top: 25px;
        background: url("@/assets/home-user-mb.png") no-repeat center;
        .box_content_user_content_text {
          width: 100%;
          height: calc(100% - 50px);
          overflow-y: auto;
          padding: 25px;

          p {
            font-family: Microsoft YaHei;
            font-weight: 400;
            font-size: 16px;
            color: #333333;
            line-height: 28px;
            text-indent: 2em;
          }
        }
      }
      .box_content_us_content {
        height: auto;
        flex-direction: column;
        .box_content_us_content_left,
        .box_content_us_content_right {
          width: 100%;
        }
        .box_content_us_content_right {
          margin-top: 15px;
          height: 220px;
        }
      }
    }
  }

  .box_container .box_content .box_content_user_content_img {
      width: 202px;
      height: 202px;
      position: absolute;
      right: 2px;
      bottom: auto;
      top: 73px;
  }
  .box_container .box_content .box_content_us_content_img{
      width: 202px;
      height: 202px;
      position: absolute;
      left: 2px;
      bottom: auto;
      top: 73px;
  }
}

@media screen and (max-width: 376px) {
  .formBox {
    width: 80%;
    margin: 0 auto;
  }
  .box_container {
    .box_banner {
      width: 100%;
      height: 245px;
      overflow: hidden;
      :deep(.t-swiper) {
        height: 100%;
        .t-swiper__content {
          height: 100%;
          .demo-item {
            height: 100%;
            img {
              width: 100%;
              height: 100%;
            }
          }
        }
      }
    }
    .box_content {
      width: 100% !important;
      .box_content_news {
        display: none;
      }
      .box_content_news_mobile {
        display: block;
      }
      .box_content_news_mobile_content {
        width: 100%;
        // height: 629px;
        background: #ffffff;
        box-shadow: 0px 0px 11px 0px rgba(50, 50, 50, 0.2);
        padding: 20px;
        .box_content_news_content_item_content_item {
          width: 100%;
          padding: 25px 0;
          border-bottom: 1px solid #e3e3e3;
          .box_content_news_content_item_content_item_title {
            font-family: Microsoft YaHei;
            font-weight: 400;
            font-size: 16px;
            line-height: 30px;
            color: #666666;
            width: calc(100% - 80px);
            white-space: nowrap; /* 强制文本不换行 */
            overflow: hidden; /* 隐藏溢出内容 */
            text-overflow: ellipsis; /* 显示省略号 */
            cursor: pointer;
          }
          .box_content_news_content_item_content_item_date {
            margin-top: 8px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            font-size: 14px;
            color: #666666;
            display: flex;
            align-items: center;
            justify-content: space-between;
            a {
              font-family: Microsoft YaHei;
              font-weight: bold;
              font-size: 14px;
              color: #ad2121;
            }
            > div {
              display: flex;
              align-items: center;
              white-space: nowrap; /* 强制文本不换行 */
              overflow: hidden; /* 隐藏溢出内容 */
              text-overflow: ellipsis; /* 显示省略号 */
              span {
                margin-left: 8px;
              }
            }
          }
        }
        .box_content_news_content_item_content_item:last-child {
          border-bottom: 0;
        }
        .box_content_news_mobile_content_item {
          width: 100%;
          height: 330px;
          position: relative;
          .news-swiper {
            height: 100%;
            :deep(.t-swiper__navigation) {
              display: none;
            }
            :deep(.t-swiper__content) {
              height: 100%;
            }
            .news-swiper-item {
              width: 100%;
              height: 100%;
              position: relative;
              img {
                width: 100%;
                height: 100%;
              }
              .news-swiper-item-bottom {
                width: 100%;
                height: 50px;
                background: #ffffff;
                // border-radius: 10px;
                opacity: 0.7;
                position: absolute;
                bottom: 0;
                left: 0;
                span {
                  padding: 0 30px;
                  display: block;
                  width: 60%;
                  font-family: Microsoft YaHei;
                  font-weight: 400;
                  font-size: 16px;
                  color: #333333;
                  line-height: 50px;
                  white-space: nowrap; /* 强制文本不换行 */
                  overflow: hidden; /* 隐藏溢出内容 */
                  text-overflow: ellipsis; /* 显示省略号 */
                }
              }
            }
          }
          .news-swiper-page {
            width: 40%;
            height: 50px;
            position: absolute;
            right: 0;
            bottom: 0;
            z-index: 2;
            display: flex;
            align-items: center;
            justify-content: center;
            .news-swiper-page-item {
              width: 24px;
              height: 24px;
              line-height: 24px;
              background: #000000;
              opacity: 0.4;
              color: #fff;
              text-align: center;
              margin: 0 2px;
              cursor: pointer;
            }
            .news-swiper-page-item-active {
              background: #ad2121;
              opacity: 1;
            }
          }
        }
      }
      .mobile_notice {
        .box_content_news_content_item_content_item {
          // height: 120px;
          display: flex;
          justify-content: space-between;
          flex-direction: column;
          .box_content_news_content_item_content_item_date {
            display: flex;
            justify-content: space-between;
            > div {
              width: calc(100% - 80px);
            }
          }
        }
      }

      .box_content_partner_content {
        height: 408px;
        .box_content_partner_box {
          width: 100%;
          height: 100%;
          margin: 0 auto;
          box-sizing: border-box;
          display: flex;
          flex-wrap: wrap;
          overflow-y: auto;
          .box_content_partner_item {
            width: calc(50% - 5px);
            height: 124px;
            margin-right: 10px;
            margin-bottom: 10px;

            // opacity: 0.03;
            .box_content_partner_item_img {
              width: 100%;
              height: 100%;
              background: rgba(0, 0, 0, 0.03);
              img {
                width: 100%;
                // height: 100%;
                opacity: 0.93;
                -webkit-box-shadow: 2px 2px 10px #909090;
                box-shadow: 2px 2px 10px #909090;
                border-radius: 4px;
              }
            }
          }
        }
      }

      .box_content_user_content {
        padding-top: 25px;
        background: url("@/assets/home-user-mb.png") no-repeat center;
        .box_content_user_content_text {
          width: 100%;
          height: calc(100% - 50px);
          overflow-y: auto;
          padding: 25px;

          p {
            font-family: Microsoft YaHei;
            font-weight: 400;
            font-size: 16px;
            color: #333333;
            line-height: 28px;
            text-indent: 2em;
          }
        }
      }
      .box_content_us_content {
        height: auto;
        flex-direction: column;
        .box_content_us_content_left,
        .box_content_us_content_right {
          width: 100%;
        }
        .box_content_us_content_right {
          margin-top: 15px;
          height: 220px;
        }
      }
    }
  }
}
</style>
